<template>
  <div>
    <!-- 表格控件 start -->
    <div class="table-box" :style="{ height: isShow ? '95%' : '100%' }">
      <el-table
        v-if="!isSelection"
        :data="tableData"
        :cell-style="celltyle"
        :row-style="rowstyle"
        :header-cell-style="headerstyle"
        stripe
        height="100%"
        v-loading="loading"
        :show-header="isShowHeader"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :default-sort="{ prop: 'date', order: 'ascending' }"
      >
        <el-table-column
          v-if="isIndex"
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="(item, i) in tableTit"
          :key="i + '1'"
          :type="item.type"
          :label="item.titleCN"
          :prop="item.titleEN"
          :width="item.width"
          align="center"
          show-overflow-tooltip
          :sortable="item.sortable"
        >
          <template slot-scope="scope">
            <div v-if="item.urlimgtxt.length == 0 && !item.status">
              <span>{{ scope.row[item.titleEN] }}</span>
            </div>
            <div
              v-if="
                item.urlimgtxt.length > 0 &&
                item.urlimgtxt.length < 2 &&
                !item.status
              "
              class="imgtxt"
            >
              <span>{{ scope.row[item.titleEN] }}</span>
              <el-tooltip
                class="item"
                effect="light"
                :content="item.urlimgtxt[0].txt"
                placement="top-start"
              >
                <img
                  :src="
                    require('../static/image/' +
                      item.urlimgtxt[0].imgurlOrcolor +
                      '.png')
                  "
                  style="width: 20px; height: 20px"
                  @click="
                    handleclickfather(
                      item.urlimgtxt[0].txt,
                      scope.row,
                      scope.$index,
                      item.titleEN
                    )
                  "
                />
              </el-tooltip>
            </div>
            <div v-if="item.urlimgtxt.length > 1 && !item.status" class="imgss">
              <div v-for="(a, c) in item.urlimgtxt" :key="c">
                <span>{{ a.txt }}</span>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="a.txt"
                  placement="top-start"
                >
                  <img
                    :src="
                      require('../static/image/' +
                        a.imgurlOrcolor +
                        '.png')
                    "
                    style="width: 20px; height: 20px"
                    @click="
                      handleclickfather(
                        a.txt,
                        scope.row,
                        scope.$index,
                        item.titleEN
                      )
                    "
                  />
                </el-tooltip>
              </div>
            </div>
            <div v-if="item.urlimgtxt.length > 0 && item.status">
              <div v-for="(a, c) in item.urlimgtxt" :key="c">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="
                    scope.row[item.titleEN] == a.txt
                      ? scope.row[item.titleEN].toString()
                      : ''
                  "
                  placement="top-start"
                >
                  <div
                    class="backcolor"
                    :style="{
                      background:
                        scope.row[item.titleEN] == a.txt ? a.imgurlOrcolor : '',
                      display:
                        scope.row[item.titleEN] == a.txt ? 'block' : 'none',
                    }"
                  ></div>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="isSelection"
        ref="multipleTable"
        :data="tableData"
        :cell-style="celltyle"
        :row-style="rowstyle"
        :header-cell-style="headerstyle"
        stripe
        height="100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @select="selectBox"
        @row-click="rowclick"
        @toggleRowSelection="toggleRowSelection(row)"
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="(item, i) in tableTit"
          :key="i + '1'"
          :type="item.type"
          :label="item.titleCN"
          :prop="item.titleEN"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="item.titleCN !== '操作'">
              <span>{{ scope.row[item.titleEN] | formVlue }}</span>
            </div>
            <div v-else>
              <el-button
                v-for="(a, s) in item.urlimgtxt"
                :key="s"
                :type="a.type"
                :size="a.size"
                :disabled="a.disByte ? scope.row[a.disByte] : false"
                v-show="a.Unique?scope.row['create_by_uuid']==a.Unique?false:true:a.OtherUnique?scope.row['create_by_uuid']==a.OtherUnique? true:false:true"
                @click="handleclick(scope.row, a.en)"
                >{{ a.txt }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格控件 end -->
    <!-- 分页器控件 start -->
    <div
      class="pagination"
      v-show="isShow"
      :style="{ height: isShow ? '5%' : '' }"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="totalLength"
      ></el-pagination>
    </div>
    <!-- 分页器控件 end -->
  </div>
</template>

<script>
// import request from "@/http/request";
export default {
  data() {
    return {
      totalLength: 0, // 分页多少条
      pageSize: 10, //分页器的一页条数
      tableData: [], //表格数据
      currentPage: 1, //分页器的页码 （默认是第一页）
      loading: true, //默认加载
      isShow: true, //默认出现分页器
      tableTit: [], //表头数据
      isIndex: false, //序列号是否展示 默认不展示
      isSelection: false, //复选框是否展示 默认不展示
      isShowHeader:true,
    };
  },
  props: {
    Common_tablelist: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    formVlue(newV) {
      if (typeof newV == "object") {
        let str = "";
        newV.forEach((res, i) => {
          if (i > 0) {
            str += "、" + res.name;
          } else {
            str += res.name;
          }
        });
        return str;
      } else {
        return newV;
      }
    },
  },
  watch: {
    Common_tablelist(newV, oldV) {
      console.log(newV, oldV);
      this.isIndex = newV.isindex;
      this.isSelection = newV.isSelection;
      this.isShowHeader=newV.isShowHeader;
      console.log(this.isIndex, this.isSelection);
      if (newV !== null) {
        console.log("22");
        this.pageSize = newV.pageSize;
        this.currentPage = 1;
        this.tableData = newV.tableList; //表格数据
        this.totalLength = newV.total;
        this.tableTit = newV.tableTitle; //表头名称
      } else {
        this.pageSize = 10;
        this.currentPage = 1;
        this.tableData = []; //表格数据
        this.totalLength = 0;
      }
      if (this.totalLength > this.pageSize) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      console.log(this.isShow);
    },
    "Common_tablelist.isindex": {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log(val, oldVal); //但是这两个值打印出来却都是一样的
        this.isIndex = val;
        console.log(this.isSelection, this.isIndex);
      },
      deep: true,
    },
    "Common_tablelist.pageSize": {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log(val, oldVal); //但是这两个值打印出来却都是一样的
        this.pageSize = val;
      },
      deep: true,
    },
    "Common_tablelist.tableList": {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log(val, oldVal); //但是这两个值打印出来却都是一样的
        if (val || val.length > 0) {
          console.log(val);
          this.isIndex = this.Common_tablelist.isindex;
          this.isSelection = this.Common_tablelist.isSelection;
          this.tableData = val; //表格数据
          console.log(this.tableData);
          this.loading = false;
          this.totalLength = this.Common_tablelist.total;
          if (this.totalLength > this.pageSize) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.tableTit = this.Common_tablelist.tableTitle; //表头名称
        } else {
          console.log(val);
          this.tableData = []; //表格数据
          this.loading = false;
          this.tableTit = this.Common_tablelist.tableTitle; //表头名称
        }
      },
      deep: true,
    },
  },
  methods: {
    //单元格样式
    celltyle() {
      return `
       cursor:pointer;
        color: #165F5D;
        font-size: 5px!important;
        `;
      // }
    },
    rowstyle() {
      return `
        cursor:pointer;
        `;
    },
    //表头的样式
    headerstyle() {
      return `
          cursor:pointer;
          background: rgb(81, 187, 248);
          color: #fff;
        `;
    },
    //复选框事件
    //点击选择框事件
    selectBox(selection, row) {
      // console.log(row);
      // console.log(selection);
      this.$emit("Selectcheckbox", selection, row);
    },
    //行点击事件
    rowclick(row) {
      // console.log(row);
      this.$emit("rowclickforout", row);
    },
    //外部激活点击行
    Clearcheckbox(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    // Clearcheckboxall() {
    //   this.$refs.multipleTable.clearSelection();
    // },
    //操作以外的图片点击
    handleclickfather(txt, data, index, ele) {
      console.log(txt, data, index, ele);
      this.$emit("Imgclick", txt, data, index, ele);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //触发切换页码  val:页码; pageSize:一页行数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("changePagination", val, this.pageSize);
    },
    /* 按钮事件 start */
    handleclick(row, type) {
      // console.log(row,type);
      if (type == "Delete") {
        this.$emit("deleteRow", row);
      } else if (type == "edit") {
        this.$emit("editRow", row);
      } else {
        this.$emit("InfoRow", row, type);
      }
    },
    /* 按钮事件 end */
    //全选
    // toggleAllSelection(selection) {
    //   console.log(selection);
    //   let row = {};
    //   this.$emit("Selectcheckbox", selection, row);
    // }
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table__header-wrapper .el-checkbox {
  //找到表头那一行，然后把里面的复选框隐藏掉
  display: none;
}
// .table-box{
//   overflow: auto;
// }
.imgtxt {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  span {
    display: inline-block;
    width: 10%;
  }
}
.imgss {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  div {
    width: 50%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
      width: 40%;
    }
  }
}
.backcolor {
  width: 100px;
  height: 25px;
}
.pagination {
  text-align: center;
}
</style>